<template>
  <div class="data-base-container" >
    <div class="left-tree">
      <div class="title">
        <i class="line"></i>
        <p class="text">资源目录</p>
      </div>
      <el-input
        size="small"
        class="input-search"
        clearable
        placeholder="输入关键字进行过滤"
        v-model="filterText"
      >
      </el-input>
      <el-tree
        class="filter-tree"
        :data="treeData"
        :props="defaultProps"
        highlight-current
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree"
        @node-click="nodeClick"
      >
      </el-tree>
    </div>
    <pageContainer class="right-table" >
      <template slot="header">
        <div class="title">
          <i class="line"></i>
          <p class="text">数据资源管理</p>
        </div>
        <div class="search">
          <!-- <div class="queryList" v-for="item,index in queryList" :key="index">
            <el-input
              v-if="item.queryMode === 'input'"
              placeholder="请输入关键字"
              v-model="item.queryField"
              size="small"
              @clear="getTable"
              class="input-with-select"
            >
            </el-input>
            <el-cascader
              v-if="item.queryMode === 'tree'"
              v-model="item.queryField"
              size="small"
              :options="cascaderOptions"
              :props="cascaderProps"
            />
            <el-select v-model="item.queryField" class="m-2" placeholder="Select" size="small"
              v-if="item.queryMode === 'select'">
              <el-option
                v-for="item in selectOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
          </div> -->

          <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="right" >
            <div class="queryList" v-for="item,index in queryList" :key="index">
              <el-form-item :label="item.queryDes" v-if="item.queryMode === 'input'">
                <el-input v-model="formInline[item.queryField]" :placeholder="'请输入'+item.queryDes" size="small" clearable />
              </el-form-item>
              <el-form-item :label="item.queryDes" v-if="item.queryMode === 'tree'">
                <el-cascader
                  v-model="formInline[item.queryField]"
                  size="small"
                  :placeholder="'请选择'+item.queryDes"
                  :options="cascaderOptions"
                  :props="cascaderProps"
                />
              </el-form-item>
              <el-form-item :label="item.queryDes" v-if="item.queryMode === 'select'">
                <selectTree :selectDictType="selectDictType" :queryDes="item.queryDes" :formInline="formInline" :queryField="item.queryField" @selectChanges="selectChanges" ref="selectTree"/>
              </el-form-item>
            </div>
          </el-form>
           <el-button size="small" type="primary" @click="search" v-if="tableData&&tableData.length>0">搜索</el-button>
           <el-button size="small" type="primary" @click="reset" v-if="tableData&&tableData.length>0">重置</el-button>
          <el-button size="small" type="success" @click="addDataBase" v-if="resourceType === 1" v-hasPermi="['resource:record:add']">新增表记录</el-button>
          <el-button size="small" type="primary" @click="createTable" v-if="resourceType === 1" v-hasPermi="['resource:table:add']">创建表</el-button>
          <el-button size="small" type="warning" @click="updateTable" v-if="resourceType === 1" v-hasPermi="['resource:table:edit']">修改表</el-button>
          <el-button size="small" type="danger" @click="delTable" v-if="resourceType === 1" v-hasPermi="['resource:table:remove']">删除表</el-button>
          <el-upload
            class="upload-demo"
            :action="actionUrl"
            accept=".xls,.xlsx,.rar,.zip,.7z,.doc,.docx,.ppt,.pptx"
            :headers="headers"
            :data="uploadData"
            :before-upload="beforeUpload"
            :on-remove="onRemove"
            :on-error="handleError"
            :on-success="onSuccess"
            :auto-upload="true"
            :file-list="fileList">
            <el-button size="small" type="primary" v-hasPermi="['resource:record:upload']">上传</el-button>
          </el-upload>
          <el-button size="small" type="primary" @click="downLoad" v-if="resourceType === 1" v-hasPermi="['resource:record:model']">模版下载</el-button>
        </div>
      </template>
      <template slot="center">
        <div class="table" ref="table">
          <el-table
           :data="tableData"
          :header-cell-style="{textAlign: 'center',color: '#fff',backgroundColor: '#223450'}"
            style="width: 100%;height:100%"
          >
            <el-table-column align="center" type="selection" width="55" v-if="tableData.length > 0"> </el-table-column>
            <el-table-column align="center" type="index" label="序号" v-if="tableData.length > 0">
            </el-table-column>
            <el-table-column v-for="item,index in tableHeaderList" :key="index" :prop="item.prop" :label="item.label" :show-overflow-tooltip="true" align="center"> </el-table-column>
            <el-table-column label="操作" v-if="this.pkName" align="center" width="150px">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="edit(scope.row)"
                  style="padding: 0"
                  v-hasPermi="['resource:record:edit']"
                  v-if="resourceType === 1"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  @click="check(scope.row)"
                  style="padding: 0"
                  v-hasPermi="['resource:record:info']"
                  v-if="resourceType === 1"
                  >查看</el-button
                >
                <el-button type="text"
                  v-if="resourceType === 2"
                  @click="preview(scope.row)"
                  v-hasPermi="['resource:file:preview']"
                  >预览</el-button
                >
                <el-button type="text"
                v-if="resourceType === 2"
                  @click="downLoadRow(scope.row)"
                  v-hasPermi="['resource:file:download']"
                  >下载</el-button
                >
                <el-button type="text"
                  v-if="resourceType === 2"
                  style="color: red; padding: 0"
                  v-hasPermi="['resource:file:remove']"
                  @click="remove(scope.row,resourceType)"
                  >删除</el-button
                >
                <el-button type="text"
                v-if="resourceType === 1"
                  v-hasPermi="['resource:record:remove']"
                  style="color: red; padding: 0"
                  @click="remove(scope.row,resourceType)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template slot="bottom">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </template>
    </pageContainer>
    <dataBaseDialog v-if="dataRow.dataBaseVisible" :dataRow="dataRow" @handleClose="handleClose"  :nodeId="nodeId"/>
    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :title="title"
      width="90%"
      :close-on-click-modal	="false"
      :before-close="handleCloseDialog"
    >
      <div class="content">
        <div class="top">
          <h3 class="title">表基本信息</h3>
          <el-form :model="ruleForm" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="表名称:" prop="tableName">
              <el-input v-model="ruleForm.tableName" size="small" style="width: 100%;"></el-input>
            </el-form-item>
            <el-form-item label="表描述:" prop="tableDes">
              <el-input v-model="ruleForm.tableDes" size="small" style="width: 100%;"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="bto">
          <div class="bto-bottom">
            <h3 class="title">表字段创建</h3>
            <el-button type="primary" size="small" class="btn" @click="addTableCloumn"><span style="font-size:18px" >+</span></el-button>
          </div>
          <el-table
          :data="cloumnTableData"
          :header-cell-style="{textAlign: 'center',color: '#fff',backgroundColor: '#223450'}"
            style="width: 100%"
          >

          <el-table-column prop="sort" label="排序" align="center" width="100px">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sort" type="number" clearable size="small" style="width: 100%;"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="columnAlias" label="字段别名" align="center" width="150px">
            <template slot-scope="scope">
              <el-input clearable v-model="scope.row.columnAlias" size="small" style="width: 100%;"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="columnDes" label="字段描述" align="center" width="150px">
            <template slot-scope="scope">
              <el-input clearable v-model="scope.row.columnDes" size="small" style="width: 100%;"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="columnName" label="字段名" align="center" width="150px">
            <template slot-scope="scope">
              <el-input clearable v-model="scope.row.columnName" size="small" style="width: 100%;"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="unit" label="统计单位" align="center" width="80px">
            <template slot-scope="scope">
              <el-input clearable v-model="scope.row.unit" size="small" style="width: 100%;"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="dataType" label="数据类型" align="center" width="150px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.dataType" placeholder="请选择数据类型" size="small" style="width: 100%;" clearable @change="selectChange">
                <el-option
                  v-for="item in dataTypeList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column prop="columnType" label="字段类型" align="center" width="150px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.columnType" placeholder="请选择字段类型" size="small" style="width: 100%;" clearable>
                <el-option
                  v-for="item in columnTypeList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="maxLength" label="字段长度" align="center" width="150px">
            <template slot-scope="scope">
              <el-input v-model="scope.row.maxLength" size="small" style="width: 100%;" type="number" clearable></el-input>
            </template>
          </el-table-column>

          <el-table-column prop="isDict" label="是否关联字典表" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isDict" label="" />
            </template>
          </el-table-column>
          <el-table-column prop="dictType" label="字典类型" align="center" width="150px">
            <template slot-scope="scope">
              <el-input v-model="scope.row.dictType" size="small" style="width: 100%;" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="geomType" label="空间数据类型" align="center" width="150px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.geomType" placeholder="请选择空间数据类型" size="small" style="width: 100%;" clearable>
                <el-option
                  v-for="item in geomTypeList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="isChart" label="是否为数据资源一张图图表统计字段" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isChart" label="" />
            </template>
          </el-table-column>
          <el-table-column prop="isMapShow" label="是否数据资源一张图展示" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isMapShow" label="" />
            </template>
          </el-table-column>
          <el-table-column prop="isNotNull" label="字段是否不为空" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isNotNull" label="" />
            </template>
          </el-table-column>
          <el-table-column prop="isPk" label="是否为主键" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isPk" label="" />
            </template>
          </el-table-column>
          <el-table-column prop="isQr" label="是否关联二维码" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isQr" label="" />
            </template>
          </el-table-column>
          <el-table-column prop="isQuery" label="是否查询" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isQuery" label="" />
            </template>
          </el-table-column>
          <el-table-column prop="isRegion" label="是否为行政区划字段" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isRegion" label="" />
            </template>
          </el-table-column>
          <el-table-column prop="isDanger" label="是否为隐患点名称" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isDanger" label="" />
            </template>
          </el-table-column>
          <el-table-column prop="isTableShow" label="是否数据资源管理展示" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isTableShow" label="" />
            </template>
          </el-table-column>
          <el-table-column prop="isTableShow" label="操作" align="center" width="150px">
            <template slot-scope="scope">
              <el-button type="text" @click="removeTable(scope.row,$index)"><span style="font-size:25px;color:red">-</span></el-button>
            </template>
          </el-table-column>

          </el-table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="handleCloseDialog">取消</el-button>
          <el-button size="small" type="primary" @click="saveDialog">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- <el-dialog
      :visible.sync="uploadDialog"
      title="上传文件"
      width="30%"
      :close-on-click-modal	="false"
      :before-close="handleCloseuploadDialog"
    >
      <el-upload
        class="upload-demo"
        :action="actionUrl"
        accept=".xls,.xlsx,.rar,.zip,.7z,.doc,.docx,.ppt,.pptx"

        :data="uploadData"
        :before-upload="beforeUpload"
        :on-remove="onRemove"
        :auto-upload="true"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <el-upload
        class="upload-demo"
        action=``
        accept=".xls,.xlsx,.rar,.zip,.7z,.doc,.docx,.ppt,.pptx"
        :data="uploadData"
        :on-change="onChange"
        :on-remove="onRemove"
        :auto-upload="false"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="handleCloseuploadDialog">取消</el-button>
          <el-button size="small" type="primary" @click="saveuploadDialog">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog> -->
  </div>
</template>

<script>
import selectTree from './selectTree.vue'
import pageContainer from '@/components/pageContainer.vue'
import dataBaseDialog from './dataBaseDialog.vue'
import * as API from '../../api/resourceManagement/index.js'
// import axios from 'axios'
import { getToken } from '@/utils/auth' // get token from cookie
export default {
  components: { pageContainer, dataBaseDialog, selectTree },
  data() {
    return {
      selectDictType: [],

      isShowRightContent: false,
      formInline: {},
      actionUrl: process.env.VUE_APP_BASE_API + '/data/resource/management/upload',
      headers: {
        'Authorization': getToken()
      },
      fileRaw: null,
      uploadDialog: false,
      fileList: [],
      pkName: null,
      nodeId: null,
      // 数据类型
      dataTypeList: [
        {
          id: 1,
          label: '数字'
        },
        {
          id: 2,
          label: '字符串'
        },
        {
          id: 3,
          label: '时间'
        },
        {
          id: 4,
          label: '空间数据'
        },
        {
          id: 5,
          label: '布尔'
        }
      ],
      // 字段类型
      columnTypeList: [],
      // 空间数据类型
      geomTypeList: [
        {
          id: 1,
          label: '点数据'
        },
        {
          id: 2,
          label: '线数据'
        },
        {
          id: 3,
          label: '面数据'
        }
      ],
      ruleForm: {},
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      queryList: [],
      cascaderOptions: [],
      cascaderProps: { checkStrictly: true, label: 'label', value: 'label' },
      selectOptions: { },
      queryFormList: [],
      resourceType: 1,
      cloumnTableData: [],
      maxHeight: null,
      keywords: '',
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tableHeaderList: [],
      dataRow: {
        title: '',
        row: {},
        pkName: null,
        dataBaseVisible: false
      },
      dialogVisible: false,
      title: '',
      flag: false,
      flags: false
    }
  },
  computed: {
    uploadData() {
      return {
        catalogId: this.nodeId
      }
    }
  },
  mounted() {
    this.getTreeData()
    this.getMaxTableHeight()
    this.getAreaTreeselect()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    maxHeight: {
      handler(newV) {
        this.maxHeight = newV
      },
      deep: true
    }
  },
  methods: {
    // 行政区划
    getAreaTreeselect() {
      API.areaTreeselect().then(res => {
        if (res.code === 200) {
          this.cascaderOptions = res.data
        }
      })
    },
    selectChanges(data) {
      this.formInline[data.id] = data.value
    },
    getDictDataTtpe(val) {
      this.selectDictType = []
      // const dictType = []
      val.forEach((item, index) => {
        if (item.dicType) {
          const key = item.queryDes
          const value = item.dicType
          this.selectDictType.push({ key: key, value: value })
        }
      })
    },
    // 搜索
    search() {
      this.queryFormList = []
      this.queryList.forEach(item => {
        for (const key in this.formInline) {
          if (key === item.queryField) {
            this.queryFormList.push({
              'fieldValue': Array.isArray(this.formInline[key]) ? this.formInline[key][this.formInline[key].length - 1] : this.formInline[key],
              'queryField': key,
              'queryType': item.queryType
            })
          }
        }
      })
      this.getTable()
    },
    reset() {
      this.queryFormList = []
      this.formInline = {}
      this.getTable()
      this.$nextTick(() => {
        this.$refs.selectTree.forEach(item => {
          item.reset()
        })
      })
    },
    handleError(val) { console.log(val, 'val11111') },
    onSuccess(val) {
      if (val.code === 200) {
        this.$message.success(val.msg)
        this.getTable()
      } else {
        this.$message.error(val.msg)
      }
    },
    beforeUpload(rawFile) {
      this.fileRaw = rawFile
    },
    selectChange(val) {
      let dictType
      if (val === 1) {
        dictType = 'datatype_number'
      } else if (val === 2) {
        dictType = 'datatype_str'
      } else if (val === 3) {
        dictType = 'datatype_time'
      } else if (val === 4) {
        dictType = 'datatype_geom'
      } else if (val === 5) {
        dictType = 'datatype_bool'
      }
      API.dictDataTtpe(dictType).then(res => {
        if (res.code === 200) {
          this.columnTypeList = res.data
        }
      })
    },
    // 创建表
    async createTable() {
      this.cloumnTableData = []
      this.ruleForm = {}
      await this.getManagementGetCatalogMark()
      if (this.flags) {
        await this.getManagementIsExistTable()
        if (this.flag) {
          this.$message.warning('表信息已存在')
          return false
        }
      }
      this.title = '创建表'
      this.dialogVisible = true
    },
    // 是否存在表
    async getManagementIsExistTable() {
      await API.managementIsExistTable({ catalogId: this.nodeId }).then(res => {
        if (res.code === 200) {
          this.flag = res.data
        }
      })
    },
    // 是否存在标记
    async getManagementGetCatalogMark() {
      await API.managementGetCatalogMark({ catalogId: this.nodeId }).then(res => {
        if (res.code === 200) {
          if (res.data.resourceType === 1) {
            this.flags = true
          } else {
            this.$message.error('该标记信息为文档数据不能创建表信息')
            this.flags = false
          }
        } else {
          this.flags = false
          this.$message.error('获取标记信息失败')
        }
      })
    },
    handleCloseDialog() {
      this.cloumnTableData = []
      this.ruleForm = {}
      this.$refs.ruleForm.resetFields()
      this.dialogVisible = false
    },
    nodeClick(node, obj) {
      this.nodeId = node.id
      this.getTable()
    },
    saveDialog() {
      this.cloumnTableData.forEach(item => {
        item.sort = Number(item.sort)
        item.maxLength = Number(item.maxLength)
      })
      const data = {
        catalogId: this.nodeId,
        columns: this.cloumnTableData,
        ...this.ruleForm
      }
      if (this.title === '创建表') {
        API.managementCreateTable(data).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getTable()
            this.handleCloseDialog()
          }
        })
      } else if (this.title === '修改表') {
        API.managementAlterTable(data).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getTable()
            this.handleCloseDialog()
          }
        })
      }
    },
    removeTable(row, index) {
      this.$confirm('此操作将永久删除该条字段, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cloumnTableData.splice(index, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    remove(row, resourceType) {
      if (resourceType === 1) {
        const params = {
          catalogId: this.nodeId,
          ids: row[this.pkName]
        }
        API.managementRemoveRecords(params).then(res => {
          if (res.code === 200) {
            this.$message.success(res.mag)
            this.getTable()
          }
        })
      } else {
        const params = {
          catalogId: this.nodeId,
          fileIds: row.fileId
        }
        API.managementRemoveCatalogFile(params).then(res => {
          if (res.code === 200) {
            this.$message.success(res.mag)
            this.getTable()
          }
        })
      }
    },
    // 修改表
    async updateTable() {
      await this.getManagementIsExistTable()
      if (!this.flag) {
        this.$message.warning('表信息未存在')
        return false
      }
      this.title = '修改表'
      await this.getManagementGetTable()

      this.dialogVisible = true
    },
    getManagementGetTable() {
      API.managementGetTable({ catalogId: this.nodeId }).then(res => {
        if (res.code === 200 && res.data !== null) {
          this.ruleForm = res.data
          this.cloumnTableData = res.data.columns
        }
      })
    },
    // 删除表
    async delTable() {
      await this.getManagementIsExistTable()
      if (!this.flag) {
        this.$message.warning('表信息未存在')
        return false
      }

      this.$confirm('此操作将永久删除表信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        API.managementRemoveTable({ catalogId: this.nodeId }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getTable()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getTreeData() {
      API.managementCatalogTree().then(res => {
        if (res.code === 200) {
          this.treeData = res.data
          this.nodeId = this.treeData[0].id
          this.getTable()
          this.getManagementGetTable()
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getMaxTableHeight() {
      const windowInnerHeight = this.$refs.table
      this.maxHeight = windowInnerHeight.offsetHeight
    },
    getTable() {
      const data = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        showType: '2',
        queryFormList: this.queryFormList,
        catalogId: this.nodeId
      }
      API.managementPageRecords(data).then(res => {
        if (res.code === 200) {
          this.tableHeaderList = res.data.tableHeaders
          this.total = res.data.total
          this.tableData = res.data.records
          this.resourceType = res.data.resourceType
          this.queryList = res.data.queryList
          this.pkName = res.data.pkName
          if (res.data.queryList && res.data.queryList.length > 0) {
            res.data.queryList.forEach(item => {
              if (item.dicType) {
                this.selectOptions[item.queryDes] = []
              }
            })
            this.getDictDataTtpe(res.data.queryList)
          }
        }
      })
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      this.getTable()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTable()
      console.log(`当前页: ${val}`)
    },
    addDataBase() {
      this.dataRow.dataBaseVisible = true
      this.dataRow.title = '新增数据资源'
    },
    onChange(file, fileList) {
      if (fileList.length > 1) {
        this.$message.warning('只能上传一个文件')
        fileList.splice(1)
        return false
      }
      this.fileList = fileList
      this.fileRaw = file.raw
    },
    upload() {
      this.uploadDialog = true
    },
    onRemove(file, fileList) {
      this.fileList = [...fileList]
    },
    saveuploadDialog() {
      if (this.fileList.length > 0) {
        const formData = new FormData()
        formData.append('file', this.fileRaw)
        formData.append('catalogId', this.nodeId)
        API.managementUpload(formData).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)

            this.handleCloseuploadDialog()
          }
        })
      } else {
        this.$message.warning('请选择一个上传文件')
      }
    },
    // 下载
    downLoad() {
      API.managementModel({ catalogId: this.nodeId }).then(res => {
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        const a = document.createElement('a')
        const blobUrl = window.URL.createObjectURL(blob)
        a.download = '下载模板.xlsx'
        a.href = blobUrl
        document.body.appendChild(a)
        // 下载文件
        a.click()
        // 释放内存
        URL.revokeObjectURL(blobUrl)
        document.body.removeChild(a)
      })
    },
    // 预览
    preview(row) {
      window.open(row.previewUrl)
    },
    // 下载
    downLoadRow(row) {
      API.downloadCatalogFile({ fileId: row.fileId }).then(res => {
        const blob = new Blob([res])
        const a = document.createElement('a')
        const blobUrl = window.URL.createObjectURL(blob)
        a.download = row.name
        a.href = blobUrl
        document.body.appendChild(a)
        // 下载文件
        a.click()
        // 释放内存
        URL.revokeObjectURL(blobUrl)
        document.body.removeChild(a)
      })
    },
    handleCloseuploadDialog() {
      this.uploadDialog = false
    },
    edit(row) {
      this.dataRow.title = '编辑数据资源'
      this.dataRow.row = row
      this.dataRow.pkName = row[this.pkName]
      this.dataRow.dataBaseVisible = true
    },
    check(row) {
      this.dataRow.title = '查看数据资源'
      this.dataRow.row = row
      this.dataRow.pkName = row[this.pkName]
      this.dataRow.dataBaseVisible = true
    },

    handleClose() {
      this.dataRow.dataBaseVisible = false
      this.getTable()
    },
    addTableCloumn() {
      this.cloumnTableData.push({
        tableId: this.nodeId,
        sort: null,
        columnAlias: null,
        columnDes: null,
        columnName: null,
        dataType: null,
        columnType: null,
        maxLength: null,
        isDict: null,
        dictType: null,
        geomType: null,
        isChart: null,
        isMapShow: null,
        isNotNull: null,
        isPk: null,
        isQr: null,
        isQuery: null,
        isRegion: null,
        isDanger: null,
        isTableShow: null
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  .top{
    .title{
      color:#fff
    }
  }
  .bto{
    .bto-bottom{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 0.5rem;
      .title{
        color:#fff
      }
      .btn{
        height: 0.25rem;
        line-height: 0.1rem;
      }
    }
    :deep(.el-table__body-wrapper){
      overflow: auto;
      height: 248px;
    }
  }
}
.data-base-container {
  display: flex;
  padding: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  .left-tree {
    width: 15%;
    height: calc(100% - 20px);
    background: rgba(3, 27, 54, 0.7);
    padding: 10px;
    overflow: hidden;
    .title {
      display: flex;
      align-items: center;
      height: 30px;
      .line {
        width: 5px;
        height: 25px;
        background: #409eff;
        margin-right: 5px;
      }
      .text{
        color: #fff;
      }
    }
    .input-search {
      margin: 10px 0px;
    }
    .filter-tree{
      width: 100%;
      overflow: auto;
      height: calc(100% - 82px);
      :deep(.el-tree-node){
        width: 460px;
      }
    }

  }
  .right-table {
    width: 83%;
    padding: 0;
    margin-left: 10px;
    height: 100%;
    .title {
      display: flex;
      align-items: center;
      height: 30px;
      .line {
        width: 5px;
        height: 25px;
        background: #409eff;
        margin-right: 5px;
      }
      .text{
        color: #fff;
      }
    }
    .search {
      height: calc(100% - 30px);
      display: flex;
      align-items: center;
      .input-with-select {
        width: 20%;
        margin-right: 10px;
      }
    }
    .table {
      height: calc(100% - 0.1rem);
      margin-top: 10px;
      :deep(.el-table__body-wrapper) {
        overflow: auto;
        max-height: calc(100% - 1.3rem);
      }
    }
  }
}
/*最外层透明*/
:deep(.el-table), :deep(.el-table__expanded-cell){
  background-color: transparent;
}
/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  color: #C9E9FF;
  height: 30px;
}
:deep(.el-table thead) {
  color: #7EC1FF;
  font-size: 14px;
}
:deep(.el-table--enable-row-hover){
   background-color: transparent;
}
:deep(.el-table .warning-row) {
 background: rgba(51, 91, 127, 0.6);
}
:deep(.el-table){
  --el-table-border-color: rgba(51, 91, 127, 0.6) !important;

}
:deep(.el-table tbody tr:hover > td) {
            background: rgba(51, 91, 127, 0.4) !important;
        }
   :deep(.el-input__inner){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;

}
:deep(.el-pager li){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;
}
:deep(.btn-prev){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;
}
:deep(.el-pagination button:disabled){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;

}
:deep(.el-pagination__total),:deep(.el-pagination__jump){
  color: #fff;
}
:deep(.el-table td.el-table__cell),:deep(.el-table th.el-table__cell.is-leaf){
  border-color: rgba(231,234,241,0.2);
}
:deep(.el-table::before){
  background: rgba(231,234,241,0.2);
}
:deep(.el-form-item__label){
  color: #A3B3BE;
}
:deep(.el-tree-node__label){
  color: #fff;
}
:deep(.el-tree){
  background: rgba(3, 27, 54, 0.7);
}
:deep(.el-tree-node__content:hover) {
    background-color: #65a19f !important;
}
:deep(.el-tree-node:focus>.el-tree-node__content){
    background: #65a19f !important;
}
:deep.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background: #65a19f !important;
}
:deep(.el-tree--highlight-current){
  .el-tree-node__children{
    .el-tree-node.is-current{
      .el-tree-node__content{
        background: #65a19f !important;
      }
    }
  }
}
:deep(.el-dialog){
  background: rgba(0,28,55,0.85);
}
:deep(.el-dialog__header){
  border-bottom: 1px solid rgba(120, 189, 255, 1);
  margin-right: 0px;
  margin-bottom:10px
}
:deep(.el-dialog__title){
  color: #41B0FF;
  font-size: 16px;
}

:deep(.el-dialog__headerbtn .el-dialog__close){
  color: rgba(70, 174, 255, 1);
}
.upload-demo{
  margin: 0 0.1rem;
  :deep(.el-upload-list){
    display: none;
  }
}
.demo-form-inline{
  display: flex;
  height:40px;
  .queryList{
    height: 100%;
  }
  :deep(.el-form-item__content){
    width: 120px;
  }
}
</style>
